﻿<!DOCTYPE HTML>
<!-- saved from url=(0055)http://atomicrobotdesign.com/blog_media/draw/draw1.html -->
<!DOCTYPE html PUBLIC "" "">
<html lang="en">
<head>
    <meta content="IE=11.0000" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <title>Draw a rectangle</title>
    <style>
        body
        {
            padding: 0;
            margin: 0;
            background: #888;
        }
        canvas
        {
            display: block;
            margin: 30px auto 0;
            background: #fff;
        }
        h1
        {
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            margin: 0;
            font-size: 60px;
            font-family: Arial, sans-serif;
            width: 800px;
            line-height: 80px;
        }
    </style>
    <meta name="GENERATOR" content="MSHTML 11.00.9600.17728">
</head>
<body>
    <h1>Draw a rectangle!</h1>
    <canvas width="500" height="500" id="canvas"></canvas>
    <div>
        document.x:<input id="documentx" type="text" value="" />
        canvas.x:<input id="canvasx" type="text" value="" />
        mouse.down.x:<input id="mousedownx" type="text" value="" />
        mouse.up.x:<input id="mouseupx" type="text" value="" />
        rect.width :<input id="rectwidth" type="text" value="" />
    </div>
    <div>
        document.y:<input id="documenty" type="text" value="" />
        canvas.y:<input id="canvasy" type="text" value="" />
        mouse.down.y:<input id="mousedowny" type="text" value="" />
        mouse.up.y:<input id="mouseupy" type="text" value="" />
        rect.height:<input id="rectheight" type="text" value="" />
    </div>

    <script>
        var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        rect = {},
        drag = false;

        function draw() {
            ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
        }

        function mouseDown(e) {
            rect.startX = e.pageX - this.offsetLeft;
            rect.startY = e.pageY - this.offsetTop;
            drag = true;

            // Tracking mouse down coordinate on canvas
            var x, y;
            var e = e || window.event;
            document.getElementById("mousedownx").value = e.pageX - this.offsetLeft;
            document.getElementById("mousedowny").value = e.pageY - this.offsetTop;
        }

        function mouseUp(e) {
            drag = false;

            // Tracking mouse up coordinate on canvas
            var x, y;
            var e = e || window.event;
            document.getElementById("mouseupx").value = e.pageX - this.offsetLeft;
            document.getElementById("mouseupy").value = e.pageY - this.offsetTop;
            document.getElementById("rectwidth").value = e.pageX - this.offsetLeft - rect.startX;
            document.getElementById("rectheight").value = e.pageY - this.offsetTop - rect.startY;
        }

        function mouseMove(e) {
            // Tracking mouse coordinate on canvas
            var x, y;
            var e = e || window.event;
            document.getElementById("canvasx").value = e.pageX - this.offsetLeft;
            document.getElementById("canvasy").value = e.pageY - this.offsetTop;

            if (drag) {
                rect.w = (e.pageX - this.offsetLeft) - rect.startX;
                rect.h = (e.pageY - this.offsetTop) - rect.startY;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                draw();
            }
        }

        function showPosition(e) {
            // Tracking mouse coordinate on document
            var x, y;
            var e = e || window.event;
            document.getElementById("documentx").value = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            document.getElementById("documenty").value = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }

        function init() {
            canvas.addEventListener('mousedown', mouseDown, false);
            canvas.addEventListener('mouseup', mouseUp, false);
            canvas.addEventListener('mousemove', mouseMove, false);
            document.addEventListener('mousemove', showPosition, false);
        }

        init();

</script>
</body>
</html>
